import React, {Component} from 'react';
import ReactDOM from 'react-dom'
import {connect} from 'dva';
import {routerRedux, Link} from 'dva/router';
import {
    Form,
    Input,
    Button,
    Select,
    Row,
    Col,
    Popover,
    Progress
} from 'antd';
import styles from '../User/Register.less';
import BraftEditor from 'braft-editor'
import 'braft-editor/dist/braft.css'
const FormItem = Form.Item;
const {Option} = Select;
const InputGroup = Input.Group;

export default class Article extends Component {
    state = {
        htmlContent: ''
    }

    render() {
        const editorProps = {
            placeholder: '',
            initialContent: '',
            tabIndents: 4,
            onHTMLChange: this.handleHTMLChange,
            onSave: this.handelSave,
            viewWrapper: '.wrapper'
        }
        return (
            <div>
                <Form>
                    <FormItem>
                        <Input placeholder="文章标题" />
                    </FormItem>
                    <FormItem>
                        <Input placeholder="作者" />
                    </FormItem>
                    <FormItem>
                        <div className="wrapper" style={{
                                backgroundColor: '#fff'
                            }}>

                            <BraftEditor {...editorProps}/>
                        </div>
                    </FormItem>
                </Form>
            </div>
        );
    }

    handleHTMLChange = (htmlContent) => {
        this.setState({htmlContent})
    }
    handelSave = () => {
        console.log(this.state.htmlContent);
    }
}
